<template>
	<view>
		<view class="main-box" v-if="listData.length>0">
		    <view class="box">
				<view class="box-item" @click="navTo('5')">
					<image src="@/static/img/index/bar/工程车.png" class="barimmg">
					<view>工程车</view>
				</view>
				<view class="box-item" @click="navTo('0')">
					<image src="@/static/img/index/bar/危化品车.png" class="barimmg">
					<view>危化品车辆</view>
				</view>
				<view class="box-item" @click="navTo('4')">
					<image src="@/static/img/index/bar/危废车.png" class="barimmg">
					<view>危废车辆</view>
				</view>
				<view class="box-item" @click="navTo('1')">
					<image src="@/static/img/index/bar/普通货车.png" class="barimmg">
					<view>普通货车</view>
				</view>
				<view class="box-item" @click="navTo('3')">
					<image src="@/static/img/index/bar/私家车.png" class="barimmg">
					<view>私家车</view>
				</view>
				<view class="box-item" @click="navTo('2')">
					<image src="@/static/img/index/bar/人员预约.png" class="barimmg">
					<view>人员预约</view>
				</view>
				<view class="box-item">
				</view>
				<view class="box-item">
				</view>
			</view>
			<!-- <block v-for="(item, index) in listData" :key="index">
				<view class="main-box-item" @click="clickItem(item)">
					<view class="box-item-info-1">
						<view class="row1">
							<view class="txt">
								{{item.text}}
							</view>
							<view class="img">
								<uni-icons type="right" color="#07D2C6" size="18" />
							</view>
						</view>
						<view class="row2">
							<view class="txt">
								{{item.notes}}
							</view>
						</view>
					</view>
					<view class="box-item-info-2">
						<image :src="item.icon" class="img" mode="scaleToFill"></image>
					</view>
				</view>
			</block> -->
		</view>
	</view>
</template>

<script>
	import {
		UserJobsType,
		UserJobMenuAuth,
		Storage_Key,
	} from '@/static/config.js'
	import {
		GetAuthModule,
		NavTo
	} from '@/common/util.js'
	export default {
		data() {
			return {
				listData: [],
			}
		},
		mounted() {
			let _self = this;
			uni.$on('RefreshIndexTabs', function(data) {
				_self.getListData();
			})
			_self.getListData();
		},
		methods: {
			clickItem(item) {
				this.$emit('clickItem', item)
			},
			getListData() {
				this.listData = GetAuthModule('index-1');
			},
			navTo(params) {
				this.$emit('close')
				if (params !== '2') {
					uni.navigateTo({
						url: '/pages/booking/booking-car-add?params=' + params
					})
				} else {
					uni.navigateTo({
						url: '/pages/booking/booking-person-add?params=' + params
					})
				}
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main-box {
		display: flex;
		padding: 10px;
		width: 100%;
		height: 160px;
		align-content: center;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
		
		.box{
			width: 100%;
			height: 100%;
            display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;
			
			.box-item{
				width: 25%;
				height: 50%;
				margin: 3px 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			
			.barimmg{
				width: 45px;
				height: 45px;
			}
		}

		.main-box-item {
			// flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			// width: 70px;
			height: 90%;
			margin: 8px;
			background-color: $app-platform-color;
			flex: 1;
			border-radius: 16rpx;

			.box-item-info-1 {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex: 0.8;
				height: 70%;

				.row1 {
					display: flex;
					align-items: center;

					.txt {
						color: #FFFFFF;
						font-size: 32rpx;
						font-weight: bold;
					}

					.img {
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 6rpx;
						border-radius: 50%;
						width: 34rpx;
						height: 34rpx;
						background-color: #FFFFFF;
					}
				}

				.row2 {
					.txt {
						color: #FFFFFF;
						font-size: 24rpx;
					}
				}

			}

			.box-item-info-2 {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-left: 12rpx;
				flex: 0.1;

				.img {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 52px;
					height: 60px;
				}
			}
		}
	}
</style>
